<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <video width="320" height="240" controls>>
        <source src="D:\Documents\Downloads\抖音2025417-894460.mp4">
        您的浏览器不支持HTM5video 标签。
    </video>
<p>请把鼠标移动到单词上，可以看到鼠标指针发生变化:</p>
<span style="cursor:auto">auto</span><br>
<span style="cursor:crosshair">crosshair</span><br> 
<span style="cursor:default">default</span><br>
<span style= cursor:e-resize >e resize</span><br>
<span style="cursor:help">help</span><br><span style="cursor:move">move</span><br>
<span style="cursor:move">move</span><br>
<span style="cursor:ne-resize">ne-resize</span><br>
<span style="cursor:nwresize">nwresize</span><br>
<span style="cursor:pointer">pointer</span><br>
<span style="cursor:progress">progress</span><br>
<span style="cursor:s-resize">s-resize</span><br>
<span style="cursor:se-resize">se-resize</span><br>
<span style= cursor:sw-resize >sw resize</span><br>
<span style="cursor:text">text</span><br>
<span style= cursor:w-resize >w resize</span><br>
<span style="cursor:wait">wait</span><br> 
        <div style="width:100%;height: 100px;background-color: rgb(223, 8, 238);">
        <p style="width: 5px;height:100px;background-color: red;"></p>
        <p style="margin:-100px 10px;font-size:50px;"><b>Daager!</b>Someetext...</p>
    </div>
         <div style="width: 100%;height:100px;background-color:rgb(218,242,181)">
            <p style="width:5px;height:100px;background-color: green;"></p>
            <p style="margin:-100px 10px;font-size: 50px;"><b>Success!</b>sometext...</p>
        </div>
                <div style="width:100%;height:100px;background-color:rgb(169,170,234)">
                <p style="width:5px;height: 100px;background-color:blue;"></p>
                <p style="margin:-100px 10px;font-size: 50px;"><b>Info!</b>Some text...</p>
            </div>

    
        <div id="mySidenav" class="sidenav">
            <a href="#" id="淘宝">淘宝特卖</a>
            <a href="#" id="京东">京东商城</a>
            <a href="#" id="阿里">阿里精选</a>
            <a href="#" id="天猫">天猫商城</a>
          <div style="margin-left:80px;">
            <h2>快速便签</h2>
            <p>⬅️请将鼠标移动到此处</p>
            <p>👈👨</p>
          </div>
          <style>
        #mySidenav a {
            position: absolute;
            right: -80px;
            transition: 0.3s;
            padding: 15px;
            width: 100px;
               text-decoration: none;
            font-size: 20px;
            color: white;
            border-radius: 0 5px 5px 0;
        }
        
        #mySidenav a:hover {
            right: 0;
        }
        #淘宝 {
            top: 20px;
            background-color: orange;
        }
        
        #京东 {
            top: 80px;
            background-color: red;
        }
        
        #阿里 {
            top: 140px;
            background-color: orange;
        }
        
        #天猫 {
            top: 200px;
            background-color: red;
        }
        </style>
</body>
</html>